<template>
  <div class="shadow-overlay" :style="{ zIndex }">
    <div class="top-shadow"></div>
  </div>
</template>

<script setup>
// 阴影遮罩组件，用于创建聚光灯效果
defineProps({
  zIndex: {
    type: Number,
    default: 2
  }
})
</script>

<style lang="scss" scoped>
.shadow-overlay {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  pointer-events: none;
  background-image: url('@/assets/images/mask_bg.png');
  background-size: cover;
  background-position: center;
  background-repeat: no-repeat;
}

.top-shadow {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  pointer-events: none;
  background: radial-gradient(
    ellipse 120% 50% at 50% 50%,
    transparent 0%,
    transparent 25%,
    rgba(0, 0, 0, 0.1) 35%,
    rgba(0, 0, 0, 0.3) 50%,
    rgba(0, 0, 0, 0.5) 70%,
    rgba(0, 0, 0, 0.7) 90%,
    rgba(0, 0, 0, 0.8) 100%
  );
  mask-image: linear-gradient(
    to bottom,
    black 0%,
    black 200px,
    transparent 400px
  );
  -webkit-mask-image: linear-gradient(
    to bottom,
    black 0%,
    black 200px,
    transparent 400px
  );
}
</style>